<template>
  <div class="container" @click="handleGallaryClick">
      <div class="wrapper">
         <swiper :options="swiperOptions">
             <swiper-slide v-for="(item,index) in imgs" :key="index">
                <img class="gallary-img" :src="item">
             </swiper-slide>
             <div class="swiper-pagination"  slot="pagination"></div>
         </swiper>
      </div>
  </div>
</template>

<script>
 export default {
    name: 'CommonGallary',
    props: {
      imgs: {
        type: Array,
        default () {
           return []
        }
      }
    },
    data () {
       return {
          swiperOptions: {
             pagination: '.swiper-pagination',
             paginationType: 'fraction',
             observeParents: true,
             observer: true
          }
       }
    },
    methods: {
       handleGallaryClick () {
           this.$emit('close')
       }
    }
 }
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container
     overflow: inherit
  .container
      display: flex
      flex-direction: column
      justify-content: center
      z-index: 99
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      background: #000
      .wrapper
         height: 0
         width: 100%
         padding-bottom: 100%
         .gallary-img
             width: 100%
         .swiper-pagination
           color: #fff
           bottom: -1rem
</style>
